<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		//sheet 초기화
		var cfg = {
		    Chart : {
				Animation : true,
		        PlotBackgroundColor : "#FAFAFA",
				PlotBorderColor:"#A9AEB1",
		        PlotBorderWidth:0.5,
				BackgroundColor:{
					LinearGradient : [0,0,100,500],
					Stops : [
						[0, "#D7E1F3"],
						[1, "#FFFFFF"]
					]
				},
				BorderColor : "#84888B"
		    },
		    title: {
                text: 'Combination chart'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
            },
            tooltip: {
                formatter: function() {
                    var s;
                    if (this.point.name) {
                        s = ''+
                            this.point.name +': '+ this.y +' fruits';
                    } else {
                        s = ''+
                        	this.x  +': '+ this.y;
                    }
                    return s;
                }
            },
            labels: {
                items: [{
                    html: 'Total fruit consumption',
                    style: {
                        left: '40px',
                        top: '8px',
                        color: 'black'
                    }
                }]
            },
            series: [{
                type: 'column',
                name: 'Jane',
                data: [3, 2, 1, 3, 4]
            }, {
                type: 'column',
                name: 'John',
                data: [2, 3, 5, 7, 6]
            }, {
                type: 'column',
                name: 'Joe',
                data: [4, 3, 3, 9, 0]
            }, {
                type: 'spline',
                name: 'Average',
                data: [3, 2.67, 3, 6.33, 3.33],
                marker: {
                	lineWidth: 2,
                	lineColor: "#846E9D",
                	fillColor: 'white'
                }
            }, {
                type: 'pie',
                name: 'Total consumption',
                data: [{
                    name: 'Jane',
                    y: 13
                }, {
                    name: 'John',
                    y: 23
                }, {
                    name: 'Joe',
                    y: 19
                }],
                center: [100, 80],
                size: 100,
                showInLegend: false,
                dataLabels: {
                    enabled: false
                }
            }]
		};
		
		myChart.SetOptions(cfg);

		myChart.Draw();
	});
</script>
<title>Combination(Line, Column, Pie) 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/chartNavi.jsp" %>	
	<div id="title">Combination(Line, Column, Pie) 예제</div>
	<div id="desc">
		Combination(Line, Column, Pie) 예제로 Line, Column, Pie 3가지 디자인을 하나의 차트에 표현한다.
	</div>

	<div id="functionArea">
		series: [{<br>
        &nbsp;&nbsp;&nbsp;&nbsp;type: '<font color="#FF0000">column</font>',<br>
        &nbsp;&nbsp;&nbsp;&nbsp;.<br>
        &nbsp;&nbsp;&nbsp;&nbsp;.<br>
        }, {<br>
        &nbsp;&nbsp;&nbsp;&nbsp;type: '<font color="#FF0000">spline</font>',<br>
        &nbsp;&nbsp;&nbsp;&nbsp;.<br>
        &nbsp;&nbsp;&nbsp;&nbsp;.<br>
        }, {<br>
        &nbsp;&nbsp;&nbsp;&nbsp;type: '<font color="#FF0000">pie</font>',<br>
        &nbsp;&nbsp;&nbsp;&nbsp;.<br>
        &nbsp;&nbsp;&nbsp;&nbsp;.<br>
        }];<br>
	</div>
	
	<div id="viewArea">
		<script type="text/javascript">
			createIBChart("myChart", "1000px", "400px");
		</script>
	</div>
</div>
</body>
</html>